<template>
    <!-- 最大盒子 -->
    <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="'上级详情'" :autoBack="true" leftIconColor="$uni-text-color" :bgColor="'#ffffff'" :titleStyle="{  color:'$uni-text-color',fontSize:'32rpx',fontWeight:'600' }" :onShareAppMessage="shareInfo">
        <view class="max_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px'}">

            <view class="list_item" v-if="previous_page_data">
                <view class="title">{{ previous_page_data.department.name }} / {{ previous_page_data.department.company.name }}</view>
                <view class="time_box">
                    <view class="surface"><image :src="`${baseUrl}/uploads/uniapp_image/user/gongzitiao_icon_time@2.png`" mode="scaleToFill"/></view>
                    <view class="time">加入时间：{{ formatDate(previous_page_data.createtime) }}</view>
                </view>
                <view class="message_box">
                    <view class="image"><image :src="`${baseUrl}${previous_page_data.share.avatar}`" mode="scaleToFill"/></view>
                    <view class="company">{{ previous_page_data.share.nickname }}</view>
                    <view class="inviter">邀请人</view>
                </view>
                <up-tabs :list="tabs" @click="tabsItem" :current="currentTab" lineWidth="20" lineHeight="7" :lineColor="`url(${baseUrl}/uploads/uniapp_image/user/user_user_slidingblock.png) 100% 100%`" :activeStyle="{ color: '#303133', fontWeight: 'bold', transform: 'scale(1.05)'}" :inactiveStyle="{ color: '#606266', transform: 'scale(1)'}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
                </up-tabs>
            </view>
            <view v-if="scheduleList.length !== 0">
                <view class="scroll_list_item" v-for="(item,index) of scheduleList" :key="index">
                    <view class="position">（{{ title_date[index] }}） {{ item.title }}</view>
                    <view class="quantity_box">
                        <view class="quantity">
                            <view class="Amount_box">
                                <view class="person_number">代招工金额</view>
                                <view class="image_box" @tap="editMoney(item)" v-if="item.state <= 1">
                                    <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/shangjixiangqing_icon_xiugaijine@2.png`" mode="scaleToFill"/>
                                    <view>修改</view>
                                </view>
                            </view>
                            <view class="gender">(男/女)</view>
                            <view class="agent_sum_left">
                                <text class="blue" v-if="!item.agent">
                                    ￥{{ item.agent_man_salary }}
                                </text>
                                <text class="blue" v-else>
                                    <template v-if="item.agent.agent_man_salary == 0 && item.agent.agent_woman_salary == 0">
                                        ￥{{ item.agent.agent_man_salary_max }}
                                    </template>
                                    <template v-else>
                                        ￥{{ item.agent.agent_man_salary }}
                                    </template>
                                </text>
                                /
                                <text class="yellow" v-if="!item.agent">
                                    ￥{{ item.agent_woman_salary }}
                                </text>
                                <text class="yellow" v-else>
                                    <template v-if="item.agent.agent_man_salary == 0 && item.agent.agent_woman_salary == 0">
                                        ￥{{ item.agent.agent_woman_salary_max }}
                                    </template>
                                    <template v-else>
                                        ￥{{ item.agent.agent_woman_salary }}
                                    </template>
                                </text>
                            </view>
                            <view :class="!item.agent || (item.agent && item.agent.agent_man_salary == 0 && item.agent.agent_woman_salary == 0) ? 'Is_not_set' : 'have_set'">
                                {{ !item.agent || (item.agent && item.agent.agent_man_salary == 0 && item.agent.agent_woman_salary == 0) ? '未设置' : '已设置' }}
                            </view>
                        </view>
                        <view class="quantity">
                            <view class="person_number">报名人数</view>
                            <view class="gender">(男/女)</view>
                            <view class="agent_sum"><text class="blue">{{ item.man_apply_total}}人</text> / <text class="yellow">{{ item.woman_apply_total}}人</text></view>
                        </view>
            
                    </view>
                    <view class="time_state_box">
                        <view class="time_state">
                            <view class="time_box">
                                <view class="blue"></view>
                                <view class="time">班次时间：{{ item.date }} （{{ item.start_time }} ~ {{ item.end_time }}）</view>
                            </view>
                            <view class="state_data">
                                <view class="croci"></view>
                                <view class="state_box">
                                    <text class="state_title">开始状态：</text>
                                    <text :class="item.state == 0 ? 'state_await' : 'state_already'">{{ item.state == 0 ? '待开始' : '已开始' }}</text>
                                </view>
                            </view>
                            <view class="state_data">
                                <view class="croci"></view>
                                <view class="state_box">
                                    <text class="state_title">代理金额(男/女)：</text>
                                    <text :class="item.state == 0 ? 'state_await' : 'state_already'">
                                        {{ item.agent ? item.agent.agent_man_salary_max : item.agent_man_salary }} / {{ item.agent ? item.agent.agent_woman_salary_max : item.agent_woman_salary }}
                                    </text>
                                </view>
                            </view>
                            <view class="state_data">
                                <view class="croci"></view>
                                <view class="state_box">
                                    <text class="state_title">需求人数(男/女)：</text>
                                    <text :class="item.state == 0 ? 'state_await' : 'state_already'"> {{ item.man_num }} / {{ item.woman_num }} </text>
                                </view>
                            </view>

                            <view class="item_pub">
                                <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/Myinvite_icon_time备份@2.png`" mode="scaleToFill"/>
                                <view class="blue">用工需求</view>
                            </view>
                            <!-- <view class="demand">
                                <view class="u-content">
                                    <u-parse :content="item.demand" :show-with-animation="true"></u-parse>
                                </view> 
                            </view> -->
                            <view class="demand" v-if="item.show">
                                    <fui-overflow-hidden  :size="24" color="#333333" type="2" gradientColor="#FFFFFF"
                                    :height="height_hidden" :visible="item.visible">
                                    <view class="u-content" >
                                    <u-parse :content="item.demand" :show-with-animation="true"></u-parse>
                                    </view>
                                    </fui-overflow-hidden>
                                    <view class="open"  @click="readMore(item)">{{ item.visibletitle }}<fui-icon :name="item.icon" color="#333"
                                    size="24"></fui-icon></view> 
                                    
                                </view>
                                <view class="demand" v-else>
                                <u-parse :content="item.demand"  :show-with-animation="true"></u-parse>
                                </view>
                        </view>
                    </view>

                    <view class="button_box">
                        <view class="button1" @tap="onShareGoods(item)" v-if="item.state == 0 || item.state == 1 " >
                            <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff/shangjixiangqing_icon_share.png`" mode="scaleToFill" /></view>
                            <view class="text">分享招人</view>
                        </view>
                        <view class="button2" @tap="skipPersonnelList(item)" >
                            <view class="image"><image :src="`${baseUrl}/uploads/uniapp_image/staff/shangjixiangqing_icon_pepolelist.png`" mode="scaleToFill" /></view>
                            <view class="text">查看人员列表</view>
                        </view>
                    </view>
                </view>
                 <!-- 加载中 && 没有更多数据了 -->
                <view>
                <s-loadmore-gather :current_page="current_page" :last_page="last_page" ref="loadmoreRef"></s-loadmore-gather>
                </view>
            </view>
            <u-empty v-else mode="list"  icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容" marginTop="50%"></u-empty>
        </view>
    </s-layout>
     <!-- 设置金额弹出层 -->
     <s-public-models 
     :show="popshows" 
     :imagesucceedSrc="dataToinformaion.imageSrc" 
     :subtitle="dataToinformaion.subtitle"  
     :hint="dataToinformaion.hint" 
     :editAgency="true"
     @cancel="manhourClose" 
     @affirm="manhourSubmit"
     :click_type="dataToinformaion.click_type" :list="edit_list" >
     </s-public-models>
</template>
<script setup>
    import { baseUrl } from '@/sheep/config';
    import { onLoad,onShow ,onReachBottom} from "@dcloudio/uni-app";
    import { reactive, ref,computed } from "vue";
    import tools from '@/sheep/helper/tools.js';
    import sheep from "@/sheep";
    import { formatDate } from '@/utils/fn.js';
    import { showShareModal } from '@/sheep/hooks/useModal';
    // 获取系统信息
    const { safeAreaInsets } = uni.getSystemInfoSync();
    const user_id = sheep.$store('user').userInfo.id
    const currentTab = ref(0)
    const tabs = ref([
        {
            name: "全部",
            value:''
        },
        {
            name: "待开始",
            value:0
        },
        {
            name: "进行中",
            value:1
        },
        {
            name: "已结束",
            value:2
        },
        {
            name: "已中止",
            value:3
        },
        {
            name: "已作废",
            value:4
        },
    ]);
    const state = ref('')
    const tabsItem = (item) => {
        currentTab.value = item.index;
        state.value = item.value
        page.value = 1
        scheduleList.value = []
        scheduleDataList()
    }
    onLoad((option) => {
        previous_page_data.value = JSON.parse(option.item)
        department_id.value = previous_page_data.value.department_id
        scheduleDataList()
    });
    //展开列表
 const height_hidden = ref()
 const readMore = (item)=> {
		  if(item.visible == false){
        item.visible = true
        item.icon = 'turningup'
        item.visibletitle = '收起列表'
      }else{
        item.visible = false
        item.icon = 'turningdown'
        item.visibletitle = '展开列表'
      }
     
			
}

    const department_id = ref()
    const previous_page_data =  ref()

    // 封装任务列表接口
    const scheduleList = ref([])
    const page = ref(1)
    const total = ref(0)
    const current_page = ref()
    const last_page = ref()
    const title_date = ref([])
    const scheduleDataList = async () => {
        let params = {
            filter: JSON.stringify({
                state: state.value,
            }),
            op: JSON.stringify({
                state: '=',
            }),
            department_id:department_id.value,
            page:page.value
        }
        const res = await sheep.$api.agency.scheduleListAPI(params)
        scheduleList.value = [...scheduleList.value,...res?.data.rows]
        scheduleList.value.forEach(item=>{
        const count_length = (item.demand.match(/<\/p>/g) || []).length;
        if(count_length > 3 || item.demand.length > 82){
          item.visible = false,
          item.show = true
          item.visibletitle ='展开列表'
          item.icon = 'turningdown'
          height_hidden.value = '110rpx'
        }else{
          item.show = false
        }
        
      
      })
        total.value = res.data.total
        current_page.value = res.data.current_page
        last_page.value = res.data.last_page
        title_date.value = []
        scheduleList.value.forEach(item => {
            let date = item.date;
            let truncatedDate = date.slice(-5);
            title_date.value.push(truncatedDate);
        });
    }

    // 滚动触底事件 + 分页处理
    const loadmoreRef = ref()
    onReachBottom((e)=>{
        loadmoreRef.value.PopupScrolltolower()
        if (current_page.value < last_page.value) {
            page.value += 1;
        } else {
            return;
        }
        scheduleDataList()
    })

    // 查看人员列表
    const skipPersonnelList = (item) => {
        let itemobj = JSON.stringify(item);
        sheep.$router.go('/subpackage/user/user/personnel_list',{
            item:itemobj
        })
    }
    // 分享招人
    const share =ref({
        title:'',
        address:'',
        date:'',
        id:'',
        employeeNeeds:''
    })
    // /移除HTML标签
    const delTag = (str) =>{
      return str.replace(/<[^>]+>/g,"");
    }
    const onShareGoods = (item) => {
        let htmlContent =  delTag(item.demand)
        share.value.title = item.title
        share.value.address = item.address
        share.value.id = item.id
        share.value.date = item.date+' ('+item.start_time+' ~ '+item.end_time +')'
        share.value.employeeNeeds = htmlContent
        showShareModal();
    }
    const shareInfo = computed(() => {
        return sheep.$platform.share.getShareInfo(
            {
                title:  share.value.title,
                desc:  share.value.address,
                params: {
                    page: '3',
                    query:share.value.id
                },
            },
            {
                type: 'clock_in', // 商品海报
                title: share.value.title,
                desc:  share.value.address,
                signUpTime: share.value.date ,
                employeeNeeds: share.value.employeeNeeds ,
            },
        );
    });
// 修改金额
const edit_ids=ref()
const edit_list = ref()
const post_data = ref()
const editMoney = (e)=>{
    post_data.value = e
    if(e.agent) {
        edit_list.value = e.agent
    } else {
        edit_list.value = e
    }
    edit_ids.value = e.id
    popshows.value = true
    //dataToinformaion.value.distinction = 'agency'
    dataToinformaion.value.click_type ='agency'
    dataToinformaion.value.subtitle = '修改代理金额'
    dataToinformaion.value.hint =  '修改代理金额后会覆盖已修改的员工金额'
    dataToinformaion.value.imageSrc = '/uploads/uniapp_image/staff/piliangshezhi_img_bg2.png'
}


    //工时弹窗
    const popshows = ref(false)
    const dataToinformaion = ref({
        subtitle: '',
        imageSrc: '',
        hint:'',
        click_type:''
    })
    // 取消按钮
    const manhourClose = (e) =>{
        popshows.value = e
    }

    // 提交批量更改按钮 此处参数 e 为输入值 参数 i 为判断是什么值 如果为 salary 为批量设置金额 如果为 man_hour 则是批量设置工时
    const manhourSubmit = async(e,i,a)=> {
        if(post_data.value.agent) {
            if(e > Number(post_data.value.agent.agent_man_salary_max) || a > Number(post_data.value.agent.agent_woman_salary_max)) {
                sheep.$helper.toast('修改不能大于限制金额');
                return
            }
        } else {
            if(e > Number(post_data.value.agent_man_salary) || a > Number(post_data.value.agent_woman_salary)) {
                sheep.$helper.toast('修改不能大于限制金额');
                return
            }
        }
        
            let params ={
                share_id:user_id,
                schedule_id:edit_ids.value,
                agent_man_salary:e,
                agent_woman_salary:a 
            }
            const res = await sheep.$api.agency.editAgentByScheduleid(params);
                if(res.code == 1){
                    sheep.$helper.toast(res.msg);
                    setTimeout(()=>{
                        page.value = 1    
                        scheduleList.value = []      
                        scheduleDataList()
                        popshows.value = false
                    },500)
                } else {
                    sheep.$helper.toast(res.msg);
                }
    }
</script>
    
<style scoped lang="scss">
    page {
        width: 100%;
        height: 100%;
    }

    // 版心
    .area {
        width: calc(100% - 40rpx);
        margin: 0 20rpx;
    }

    .list_item {
        margin-bottom: 20rpx;
        border-radius: 8px;
        background-color: #FFFFFF;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
        padding: 40rpx 30rpx 0rpx 30rpx;
        border-top: 2rpx solid #fdfdfd;
        .title {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 36rpx;
            font-style: normal;
            text-decoration: none;
            text-align: left;
            margin-bottom: 20rpx;
        }
        .time_box {
            display: flex;
            align-items: center;
            margin-bottom: 30rpx;
            .surface {
                width: 26rpx;
                height: 26rpx;
                margin-right: 10rpx;
                image {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                }
            }
            .time {
                font-family: PingFangSC;
                color: #666666;
                font-weight: 500;
                font-size: $uni-font-size-sm;
                font-style: normal;
                text-decoration: none;
            }
        }
        .message_box {
            display: flex;
            align-items: center;
            padding-bottom: 30rpx;
            .image {
                width: 44rpx;
                height: 44rpx;
                margin-right: 10rpx;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 16.5px;
                }
            }
            .company {
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: $uni-font-weight;
                font-size: 22rpx;
                font-style: normal;
                text-decoration: none;
                margin-right: 18rpx;
            }
            .inviter {
                border-radius: 4px;
                background-color: #F4F7FF;
                font-family: PingFangSC;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
                font-size: 20rpx;
                font-style: normal;
                text-decoration: none;
                padding: 5rpx;
            }
        }
    }

    .scroll_list_item {
        padding: 30rpx 0 0 0;
        border-radius: 8px;
        background-color: #FFFFFF;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
        margin-bottom: 20rpx;
        .position {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: $uni-font-size-big;
            font-style: normal;
            text-decoration: none;
            padding-bottom: 30rpx;
            margin: 0 20rpx;
            border-bottom: 1px solid #EFEFEF;
        }
        .quantity_box {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 20rpx;
            border-bottom: 1px solid #EFEFEF;
            .quantity {
                width: calc(50% - 30rpx);
                padding-bottom: 30rpx;
                margin-top: 30rpx;
                margin-bottom: 10rpx;
                .Amount_box {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .image_box {
                        display: flex;
                        align-items: center;
                        font-family: PingFangSC;
                        color: #0038F7;
                        font-weight: 600;
                        font-size: 20rpx;
                        font-style: normal;
                        text-decoration: none;
                        margin-left: 16rpx;
                        
                        image {
                            width: 26rpx;
                            height: 26rpx;
                        }
                    }
                    
                }

                .person_number {
                    font-family: PingFangSC;
                    color: #999999;
                    font-weight: $uni-font-weight;
                    font-size: $uni-font-size-sm;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                }
                .gender {
                    font-family: PingFangSC;
                    color: #B3B3B3;
                    font-weight: 500;
                    font-size: 22rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                    margin: 10rpx 0 12rpx 0;
                }
                .agent_sum {
                    font-family: PingFangSC;
                    color: #B3B3B3;
                    font-weight: 500;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                    margin: 0 30rpx;
                }
                .agent_sum_left {
                    font-family: PingFangSC;
                    color: #B3B3B3;
                    font-weight: 500;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                    margin: 0 30rpx;
                    white-space: nowrap;
                }
                .count_man {
                    font-family: PingFangSC;
                    color: #FF0000;
                    font-weight: $uni-font-weight;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                    margin: 0 30rpx;
                }
                .count_woman {
                    font-family: PingFangSC;
                    color: $uni-color-primary;
                    font-weight: $uni-font-weight;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                    margin: 0 30rpx;
                }
            }
            .quantity:nth-of-type(2) {
                margin-top: 0;
            }
        }
        
        .time_state_box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0 20rpx;
            border-bottom: 1px solid #EFEFEF;
            .time_state {
                margin: 0  20rpx;
                width: 100%;
                .time_box {
                    display: flex;
                    align-items: center;
                    margin-top: 30rpx;
                    margin-bottom: 20rpx;
                    .blue {
                        width: 10rpx;
                        height: 10rpx;
                        background-color: $uni-color-primary;
                        border-radius: 50%;
                        margin-right: 12rpx;
                    }
                    .time {
                        font-family: PingFangSC;
                        color: $uni-text-color;
                        font-weight: $uni-font-weight;
                        font-size: $uni-font-size-sm;
                        font-style: normal;
                        text-decoration: none;
                    }
                }
                .state_data {
                    display: flex;
                    align-items: center;
                    margin-bottom: 30rpx;
                    .croci {
                        width: 10rpx;
                        height: 10rpx;
                        background-color: #FF6120;
                        border-radius: 50%;
                        margin-right: 12rpx;
                    }
                    .state_box {
                        display: flex;
                        align-items: center;
                        .state_title {
                            font-family: PingFangSC;
                            color: $uni-text-color;
                            font-weight: $uni-font-weight;
                            font-size: $uni-font-size-sm;
                            font-style: normal;
                            text-decoration: none;
                        }
                        .state_await {
                            font-family: PingFangSC;
                            color: $uni-color-primary;
                            font-weight: $uni-font-weight;
                            font-size: $uni-font-size-sm;
                            font-style: normal;
                            text-decoration: none;
                        }
                        .state_already {
                            font-family: PingFangSC;
                            color: #FF6120;
                            font-weight: $uni-font-weight;
                            font-size: $uni-font-size-sm;
                            font-style: normal;
                            text-decoration: none;
                        }
                    }
                }
            }
            .examine {
                font-family: PingFangSC;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
                font-size: $uni-font-size-sm;
                font-style: normal;
                text-decoration: none;
            }
        }

        .button_box {
            display: flex;
            align-items: center;
            justify-content: center;
            .button1 {
                display: flex;
                align-items: center;
                justify-content: center;
                width: calc(50% - 20rpx);
                border-right: 4rpx solid #EFEFEF;
                margin: 30rpx 0 30rpx 20rpx;
                .text {
                    font-family: PingFangSC;
                    color: #FF6600;
                    font-weight: $uni-font-weight;
                   font-size:$uni-font-size-26;
                    font-style: normal;
                    text-decoration: none;
                }
            }
            .button2 {
                display: flex;
                align-items: center;
                justify-content: center;
                width: calc(50% - 20rpx);
                margin: 30rpx 20rpx 30rpx 0;
                .text {
                    font-family: PingFangSC;
                    color: $uni-color-primary;
                    font-weight: $uni-font-weight;
                   font-size:$uni-font-size-26;
                    font-style: normal;
                    text-decoration: none;
                }
            }
            .image {
                width: 28rpx;
                height: 28rpx;
                margin-right: 12rpx;
                display: flex;
                align-items: center;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .yellow {
        color: #FF6120;
        font-weight: $uni-font-weight;
    }

    .blue {
        color: $uni-color-primary;
        font-weight: $uni-font-weight;
    }

    :deep(.u-tabs__wrapper__nav__item ){
        width: calc(100% / 4);
        padding: 0;
    }
    :deep(.u-tabs__wrapper__nav__line){
        width: 30rpx !important;
        height: 8rpx !important;
        border-radius: 4rpx !important;
        background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%) !important;
    }
    :deep(.u-tabs__wrapper__nav__item.data-v-0546c3e4) {
        padding: 0 !important;
    }

    // 已设置
    .have_set {
        height: 24rpx;
        width: 64rpx;
        border-radius: 4px;
        border: 1px solid #0038F7;
        font-family: PingFangSC;
        color: #0038F7;
        font-weight: 400;
        font-size: 18rpx;
        font-style: normal;
        text-decoration: none;
        text-align: center;
        margin: 0 auto;
        margin-top: 12rpx;
    }
    // 未设置
    .Is_not_set {
        height: 24rpx;
        width: 64rpx;
        border-radius: 4px;
        border: 1px solid #FF6600;
        font-family: PingFangSC;
        color: #FF6600;
        font-weight: 400;
        font-size: 18rpx;
        font-style: normal;
        text-decoration: none;
        text-align: center;
        margin: 0 auto;
        margin-top: 12rpx;
    }

    .item_pub{
        display: flex;
        align-items: center;
        height: 50rpx;
        .nowrap{
            width: 90%;
            color: #666666;
            font-weight: 400;
            font-size:$uni-font-size-26;
        }
        .gray{
            width: 90%;
            color: #666666;
            font-weight: 400;
            font-size:$uni-font-size-26;
            display: flex;
        }
        .blue{
            font-family: PingFangSC;
            color: #0038F7;
            font-weight: 600;
            font-size: 26rpx;
            font-style: normal;
            text-decoration: none;
            text-align: left;
        }
        image{
            width: 28rpx;
            height: 28rpx;
            margin-right: 10rpx;
        }
    }
    .demand {
        margin: 20rpx 0;
        width: calc(100% - 40rpx);
        border-radius: 8px;
        background-color: #F8F9FF;
        padding: 20rpx;
        color: #333;
        
        font-size: 26rpx;
    }
    .open {
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333333;
  font-weight: 400;
  font-size: 24rpx;
  }
  .particulars {
      width: 120rpx;
      font-family: PingFangSC;
      color: #0038F7;
      font-weight: 400;
      font-size: 22rpx;
      font-style: normal;
      text-decoration: none;
      text-align: center;
  }

  .placeholder {
    height: 154rpx;
  }
</style>